<template>
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
        class="demo-ruleForm" status-icon>
        <el-form-item label="字典名称" prop="name">
            <el-input v-model="ruleForm.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="状态">
            <el-radio-group v-model="ruleForm.state">
                <el-radio value="1">正常</el-radio>
                <el-radio value="0">停用</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="备注">
            <el-input v-model="ruleForm.mark" type="textarea" />
        </el-form-item>
        <el-form-item>
            <el-button size="large" type="primary" @click="submitForm(ruleFormRef)">提 交</el-button>
            <el-button size="large" type="primary" @click="onCancel(ruleFormRef)">取 消</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import { defineEmits,reactive, ref} from 'vue'
import { ElMessage } from 'element-plus'
const ruleFormRef = ref()
const ruleForm = reactive({
    name: '',
    state: '',
    mark: ''
})
// 接收父组件参数
const prop = defineProps(['isEdit','dicid']);
// console.log('prop',{...prop});
if(prop.isEdit){
    //编辑模式，模拟数据请求
    ruleForm.name="鲁迅";
}

const rules = reactive({
    username: [
        { required: true, message: '不许为空', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '不许为空', trigger: 'blur' }
    ],
    code: [
        { required: true, message: '不许为空', trigger: 'blur' }
    ]
})

const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            // console.log('submit!')
            console.log({ ...ruleForm });
            // return;
            ElMessage({
                message: '添加成功！',
                type: 'success',
            })
            emits('onCancel');
        } else {
            console.log('error submit!', fields)
            ElMessage({
                message: '登录失败！',
                type: 'warning',
            })
        }
    })
}

const emits = defineEmits();
const onCancel = ()=>{
    emits('onCancel');
}
</script>

<style scoped>
.wrap {
    height: 100vh;
    background-color: pink;
    background-image: url(@/assets/imgs/login-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login {
    width: 400px;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
}

.code {
    display: flex;
    height: 36px;
}

.info {
    position: fixed;
    width: 100%;
    bottom: 10px;
    left: 0;
    color: #fff;
}
</style>